<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
      /*
      元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。
      */
      /*position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位*/
      div.static {
        position: static;
        border: 3px solid #73AD21;
      }
/*position: relative; 的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。
不会对其余内容进行调整来适应元素留下的任何空间*/
      div.relative{
        position: relative;
        left: 30px;
        border: 3px solid #73AD21;
        height: 200px;
      }
      /*设置 position: fixed; 的元素会相对视口定位，这意味着即使页面滚动也会停留在某个位置：*/
      div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 300px;
        border: 3px solid #73AD21;
      }
/**/
      div.absolute {
        position: absolute;
        top: 80px;
        right: 0;
        width: 200px;
        height: 100px;
        border: 3px solid #73AD21;
      }
      /*position: sticky; 的元素根据用户的滚动位置进行定位*/
      div.sticky {
        position:sticky; /* Safari */
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
      }
    </style>
</head>
<body style="height: 2000px">
<div class="static">
  static
</div><br/>
<div class="relative">
  relative
  <div class="absolute">absolute</div>
</div><br/>
<div class="fixed">
  fixed
</div><br/>
<div class="sticky">
  sticky
</div>
</body>
</html>